@extends("admin.layout.main")

@section("content")
    <style>
        .x-margin{
            margin: 5px;
        }
        .ivu-table td.no_padding>.ivu-table-cell{
            padding-left: 0;
            padding-right: 0;
        }
        .ivu-table th.demo-table-info-column{
            background-color: #2db7f5;
            color: white;
        }
        .ivu-table th.demo-table-error-column{
            background-color: #9f191f;
            color: white;
        }
    </style>
    <div id="app">
        <Row type="flex" justify="center" align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="23" style="margin-top: 20px;">
                <span>
                    开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 120px"
                    @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 120px"
                    @on-change="dateEndFormat">
                    </date-picker>
                </span>
                <span >
                  <i-button  type="primary" @click="getList">搜索</i-button>
                </span>

                <span style="width: 100px;display: inline-block">
                     <Upload action="/admin/alimama/order/import" :data="data"  :on-success="onSucc"  :show-upload-list="showUpList">
                        <i-button icon="ios-cloud-upload-outline">导入订单</i-button>
                    </Upload>
                </span>

            </i-col>

        </Row>

        <Row type="flex" justify="center" align="middle" style="margin: 10px">
            <i-table  @on-sort-change="sortChange"  :data="tableData" :columns="tableColumns" border >
            </i-table>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    data:{
                        token : '',
                    },
                    token:'',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '供应链',
                            key: 'scm_name',
                            width:150,
                        },
                        {
                            title: '5天内取消订单',
                            key: 'lessThenFive',
                            width:100,
                        },
                        {
                            title: '5天后取消订单',
                            key: 'moreThenFive',
                            width:100,
                        },
                        {
                            title: "订单",
                            className: 'no_padding',
                            render: (h, params) => {
                                return h("div", [
                                    h("Table", {
                                        props: {
                                            columns: [
                                                {
                                                    title:"状态",
                                                    key: "status",
                                                    className:'demo-table-info-column'
                                                },
                                                {
                                                    title:"订单数",
                                                    key: "total_order_sum",
                                                    className:'demo-table-info-column'
                                                },
                                                {
                                                    title:"付款金额",
                                                    key:"total_pay_amount",
                                                    className:'demo-table-info-column'
                                                },
                                                {
                                                    title:"佣金",
                                                    key:"total_commission",
                                                    className:'demo-table-info-column'
                                                },
                                                {
                                                    title:"技术服务费",
                                                    key:"total_tech_fee",
                                                    className:'demo-table-info-column',
                                                },
                                                {
                                                    title:"平台扣点",
                                                    key:"total_platform_tax",
                                                    className:'demo-table-info-column',
                                                },
                                                {
                                                    title:"利润",
                                                    key:"final_benifit",
                                                    className:'demo-table-info-column',
                                                },
                                            ],
                                            data: params.row.info
                                        },
                                    }),
                                ]);
                            }
                        }

                    ],
                    spinShow:false,
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    defaultStartTime:'',
                    defaultEndTime:'',
                    key:'final_benifit',
                    order:'desc',
                    showUpList:false,
                }
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.data.token = this.token;
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                onSucc(response){
                    if(response.code == 200){
                        this.$Message.info('上传成功');
                    }else{
                        this.$Message.info(response.msg);
                        return;
                    }


                },
                getList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/alimama/orders",{
                        params: {
                            token:vm.token,
                            page:page,
                            start_time:this.defaultStartTime,
                            end_time:this.defaultEndTime,
                            order_key:this.key,
                            order_value:this.order
                        }
                    })
                    .then(function (response) {
                        let data = response.data.result.data;
                        vm.page.total = response.data.result.total;
                        let result  =   [];
                        data.map((obj,key)=>{
                            let item = {};
                            item.scm_name =   obj.scm_name;
                            item.moreThenFive   =   '';
                            if(obj.moreThenFive){
                                item.moreThenFive =   obj.moreThenFive.total_order_sum;
                            }
                            item.lessThenFive   =   '';
                            if(obj.lessThenFive){
                                item.lessThenFive =   obj.lessThenFive.total_order_sum;
                            }
                            let infos   =   [];
                            let actual  =   obj.actualScm;
                            if(!actual){
                                actual  =   {};
                            }
                            actual.status=  '有效订单';
                            infos.push(actual);
                            let cancel  =   obj.cancelScm;
                            if(!cancel){
                                cancel  =   {};
                            }
                            cancel.status=  '取消订单';
                            infos.push(cancel);
                            let total   =   {
                                'status':'总订单',
                                'total_order_sum':obj.total_order_sum,
                                'total_pay_amount':obj.total_pay_amount,
                                'total_commission':obj.total_commission,
                                'total_tech_fee':obj.total_tech_fee,
                                'total_platform_tax':obj.total_platform_tax,
                                'final_benifit':obj.final_benifit,
                            };
                            infos.push(total);
                            item.info  =   infos;
                            result.push(item);
                        });
                        console.log(result);
                        vm.tableData    =   result;
                        that.spinShow = false;
                    });
                },
                dateStartFormat(f,v){   //时间控件
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){ //时间控件
                    this.defaultEndTime = f;
                },
                sortChange(sort){
                    this.order  = sort.order;
                    this.key    = sort.key;
                }

            },

        });

        vm.token = getToken();
        vm.getList(1);

    </script>

@endsection

